Skip to content

Parsity Weather Project Eval#216

Open
bhdoggett wants to merge 29 commits intoprojectshft:masterfrom
bhdoggett:master
Open

Parsity Weather Project Eval#216
bhdoggett wants to merge 29 commits intoprojectshft:masterfrom
bhdoggett:master

Conversation

@bhdoggett
Copy link

No description provided.

…e and latitude from the fetchCoordinates function. But I can't yet use this url to properly fetch the five-day data.
…te the 40 data sets into 5 sets of 8 and find the average temperature of each day. I'm working on counting the weather descriptons and icons to identify the most commonly appearing of each on each day.
… temp, the most common weather description, and the most common weather icon. Next step is to turn this data into an html tmeplate that I can append to the website.
…e I also need to updat the day of the week that is listed at the bottom.
…r current location, using javascript's built in geolocation funcionality to identify the user's longitude and latitude, to be used in the already constructed addNow and addFiveDay functions.
…tential extension, trying to create an auto-fill function for typing in a city/state/country
@@ -0,0 +1,334 @@
const apiKey = "6427275c4ee8b157888fdf144b2fc5ca";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

usually you don't put keys in github you would read it from an ENV variable but I'm sure your instructor will go over this.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it's a free api subscription, they told me I could include. Haven't tackled node yet.

maximumAge: 0,
};

return new Promise((resolve, reject) => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that you wrap this long running process in a promise.

main.js Outdated
const processedData = await processFiveDayData(fiveDayData);
addFiveDay(processedData);

addFiveDay;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems like an accident? Should delete

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh do you mean to return it?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah that's an accident. I deleted.

main.js Outdated
// identify the appropriate data range
let indexRange = [];

if (day === 1) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe just make this a dictionary lookup

Copy link

@greypants greypants Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, you could store this mapping in an object like this:

const ranges = {
  1: [0, 7],
  2: [0, 15],
  ...etc
}

const indexRange = ranges[day];

However, lines 168-184 could be replaced with one line with simple math...

I'll hold off on giving you the solution... but I have it :D

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Figured this out!

main.js Outdated

<div class="row justify-content-center my-2">
<div class="col-md-2 container-fluid border justify-content-center" id="day-1">
<p class="text-center mt-2">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could make a function that is a template of just the day of summary data and then iterate over it. Would be a lot less code and you would repeat it less

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did this!

main.js Outdated
<span class="text-center">${summaryData[0].weatherSummary}</span>
<br />
<span class="text-center"><strong>${summaryData[0].avgTemp}°</strong></span>
<br />

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: no br do it with CSS 😈

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed to using

and used bootstrap classes to handle spacing.

main.js Outdated

const indexRange = [(day - 1) * 8, day * 8 - 1];

for (let i = indexRange[0]; i <= indexRange[1]; i++) {
Copy link

@tommymarshall tommymarshall Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's really good do the hasOwnProperty check! that being said, this is a shorter way of writing it, since we essentially do the same thing twice wutgh

for (let i = indexRange[0]; i <= indexRange[1]; i++) {
  // once you understand this, half of your javascript knowledge is complete
  // the `[{ main, icon }]` will only ever take the first item in the array, so it's sort of brittle
  const { main: { temp }, weather: [{ main, icon }] } = data.list[i];
  
  tempAcc += temp;
  weatherDescriptions[main] = (weatherDescriptions[main] || 0) + 1;
  icons[icon] = (icons[icon] || 0) + 1;
}

index.html Outdated
Comment on lines 53 to 55



Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

beware of empty spaces

main.js Outdated
});
};

async function fetchCurrentLocationData(location) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some functions are es6, others es5, be consistent

main.js Outdated
async function processFiveDayData(data) {
const dividedDayData = [];

function processDayData(day) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this function is too big, needs to be spread into smaller functions to help with readability and maintainability

…istinct functions. Return an object with those funcitons called as the values of the appropriate keys.
…directly to the dividedDayData array rather than return an object to be pushed into that array at a later time.
};

const getSummaryIcon = () => {
let icons = {};

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can be const.

const fetchFiveDayData = async (coordinates) => {
const fiveDayURL = `https://api.openweathermap.org/data/2.5/forecast?lat=${coordinates.lat}&lon=${coordinates.lon}&appid=${apiKey}&units=${units}`;

const fetchFiveDay = await fetch(fiveDayURL, {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the object is static, can be a const on top of the file

const processedData = await processFiveDayData(fiveDayData);
addFiveDay(processedData);
} catch (error) {
console.error("Error processing data:", error);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this doesnt really help the user.

};

// Colate data from each day in the five-day forecast.
const processFiveDayData = async (data) => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this function is still complex, nested and logic that helpers can help with readability and debugging

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants